<template>
  <view class="container">
    <!-- 基础数据模块 -->
    <view class="module-section">
      <view class="module-header">
        <view class="module-line blue-line"></view>
        <text class="module-title">基础数据</text>
      </view>
      <view class="function-grid">
        <view class="function-item" @tap="navigateToFunction('customer')">
          <view class="function-icon customer-icon">
            <uni-icons type="person" size="24" color="#1890FF"></uni-icons>
          </view>
          <text class="function-name">客户管理</text>
        </view>
        <view class="function-item" @tap="navigateToFunction('user')">
          <view class="function-icon user-icon">
            <uni-icons type="contact" size="24" color="#52C41A"></uni-icons>
          </view>
          <text class="function-name">用户管理</text>
        </view>
        <view class="function-item" @tap="navigateToFunction('role')">
          <view class="function-icon role-icon">
            <uni-icons type="staff" size="24" color="#FA8C16"></uni-icons>
          </view>
          <text class="function-name">角色管理</text>
        </view>

        <view class="function-item" @tap="navigateToFunction('area')">
          <view class="function-icon area-icon">
            <uni-icons type="location" size="24" color="#13C2C2"></uni-icons>
          </view>
          <text class="function-name">区域管理</text>
        </view>

      </view>
    </view>

    <!-- 经营管理模块 -->
    <view class="module-section">
      <view class="module-header">
        <view class="module-line green-line"></view>
        <text class="module-title">经营管理</text>
      </view>
      <view class="function-grid">
        <view class="function-item" @tap="navigateToFunction('deployment')">
          <view class="function-icon deployment-icon">
            <uni-icons type="gear" size="24" color="#1890FF"></uni-icons>
          </view>
          <text class="function-name">设备布置</text>
        </view>
        <view class="function-item" @tap="navigateToFunction('cleaning')">
          <view class="function-icon cleaning-icon">
            <uni-icons type="trash" size="24" color="#52C41A"></uni-icons>
          </view>
          <text class="function-name">清运管理</text>
        </view>
        <view class="function-item" @tap="navigateToFunction('repair')">
          <view class="function-icon repair-icon">
            <uni-icons type="settings" size="24" color="#FA8C16"></uni-icons>
          </view>
          <text class="function-name">设备报修</text>
        </view>
        <view class="function-item" @tap="navigateToFunction('operation')">
          <view class="function-icon operation-icon">
            <uni-icons type="paperplane" size="24" color="#722ED1"></uni-icons>
          </view>
          <text class="function-name">我要清运</text>
        </view>
        <view class="function-item" @tap="navigateToFunction('quality')">
          <view class="function-icon quality-icon">
            <uni-icons type="checkmarkempty" size="24" color="#13C2C2"></uni-icons>
          </view>
          <text class="function-name">质检管理</text>
        </view>
      </view>
    </view>

    <!-- 运输管理模块 -->
    <view class="module-section">
      <view class="module-header">
        <view class="module-line orange-line"></view>
        <text class="module-title">运输管理</text>
      </view>
      <view class="function-grid">
        <view class="function-item" @tap="navigateToFunction('transport')">
          <view class="function-icon transport-icon">
            <uni-icons type="car" size="24" color="#1890FF"></uni-icons>
          </view>
          <text class="function-name">运输车辆</text>
        </view>
        <view class="function-item" @tap="navigateToFunction('route')">
          <view class="function-icon route-icon">
            <uni-icons type="navigate" size="24" color="#52C41A"></uni-icons>
          </view>
          <text class="function-name">运输路线</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        
      }
    },
    onLoad() {
      
    },
    methods: {
      navigateToFunction(type) {
        const functionMap = {
          'customer': '客户管理',
          'user': '用户管理',
          'role': '角色管理',
          'warehouse': '设备仓库',
          'area': '区域管理',
          'community': '小区管理',
          'deployment': '设备布置',
          'cleaning': '清运管理',
          'repair': '设备报修',
          'operation': '我要清运',
          'quality': '质检管理',
          'transport': '运输车辆',
          'route': '运输路线'
        };
        
        uni.showToast({
          title: `进入${functionMap[type]}`,
          icon: 'none',
          duration: 800
        });
        
        // 跳转到区域管理页面
        if (type === 'area') {
          uni.navigateTo({ url: '/pages/operation/area' });
        }
      }
    }
  }
</script>

<style scoped>
  .container {
    width: 100%;
    min-height: 100vh;
    background-color: #f5f5f5;
    padding: 16px;
    padding-bottom: 80px;
    box-sizing: border-box;
  }

  /* 模块区域 */
  .module-section {
    background-color: #ffffff;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
  }

  .module-header {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
  }

  .module-line {
    width: 4px;
    height: 20px;
    border-radius: 2px;
    margin-right: 12px;
  }

  .blue-line {
    background-color: #1890FF;
  }

  .green-line {
    background-color: #52C41A;
  }

  .orange-line {
    background-color: #FA8C16;
  }

  .module-title {
    font-size: 18px;
    font-weight: bold;
    color: #333333;
  }

  /* 功能网格 */
  .function-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
  }

  .function-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 8px;
    transition: all 0.3s ease;
  }

  .function-item:active {
    transform: scale(0.95);
  }

  .function-icon {
    width: 50px;
    height: 50px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }

  .function-name {
    font-size: 12px;
    color: #333333;
    text-align: center;
    font-weight: 500;
    line-height: 1.2;
  }

  /* 响应式调整 */
  @media (max-width: 375px) {
    .function-grid {
      gap: 12px;
    }
    
    .function-item {
      padding: 12px 6px;
    }
    
    .function-icon {
      width: 45px;
      height: 45px;
    }
    
    .function-name {
      font-size: 11px;
    }
  }
</style>